<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>上传游戏</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
            line-height: 1.6;
        }
        .form-container {
            max-width: 900px;
            margin: auto;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 8px;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #5c5c5c;
        }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; color: #333; font-weight: bold; }
        input[type="text"], input[type="file"] { width: 100%; padding: 8px; margin-bottom: 5px; }
        textarea { width: 100%; padding: 8px; margin-bottom: 5px; }
        input[type="checkbox"] { margin-right: 10px; }
        button { padding: 10px 20px; cursor: pointer; }
        button[type="submit"] { background-color: #4CAF50; color: white; border: none; }
        button[type="submit"]:hover { background-color: #45a049; }
        button[type="reset"] { background-color: #f44336; color: white; border: none; }
        button[type="reset"]:hover { background-color: #e53935; }

        /* 为表格设置基本样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            min-width: 6ch;
            padding: 4px 8px; /* 减少内边距以使行更紧凑 */
        }
        /* 表格边框样式 */
        table, td {
            border: 1px solid #ddd; /* 给表格和单元格添加边框 */
        }



        .upload-row {
            display: flex;
            justify-content: space-between;
        }
        .upload-row label {
            margin: 10px; /* 给标签和输入框之间留一些空间 */
        }
        .upload-row input[type="file"] {
            flex-grow: 1; /* 让文件输入框占据可用空间 */
            margin-right: 10px; /* 给文件输入框之间留一些空间 */
        }
        .upload-row input[type="file"]:last-child {
            margin-right: 0;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.getElementById('gameForm');
            form.addEventListener('submit', function(e) {
                e.preventDefault() // 阻止表单的默认提交行为
                // 可以在这里添加额外的验证逻辑
                if (!validateForm()) {
                    return; // 如果表单验证失败，不执行提交
                }
                // 构建FormData对象
                var formData = new FormData(form);
                // 使用fetch API发送数据
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                })
                    .then(data => {
                        console.log('Success:', data);
                        alert("添加成功");
                        document.getElementById('reset').click();
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                        alert("wrong")
                    });
            });
        });


        function validateForm() {
            var checkboxes = document.querySelectorAll('input[name="label1[]"]:checked');
            var labelString = '';
            checkboxes.forEach(function(checkbox, index) {
                if (index !== 0) labelString += ',';
                labelString += checkbox.value;
            });
            document.getElementById("label").value = labelString;
            return true;
        }
    </script>
</head>
<body>
<div class="form-container">
    <h1>
        上传游戏
        <a href="manager.html">管理游戏</a>
    </h1>
    <form action="/game/upload" method="post" enctype="multipart/form-data" onsubmit="validateForm()" id="gameForm">
        <div class="form-group">
            <label for="name">游戏名称：</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="content">游戏简介：</label>
            <textarea id="content" name="content" rows="6"  required></textarea>
        </div>
        <div class="form-group">
            <label>标签类型：</label>
            <table>
                <tr>
                    <td><input type="checkbox" id="label_visualnovel" name="label1[]" value="视觉小说"> 视觉小说</td>
                    <td><input type="checkbox" id="label_lovesimulation" name="label1[]" value="恋爱模拟"> 恋爱模拟</td>
                    <td><input type="checkbox" id="label_roleplay" name="label1[]" value="角色扮演"> 角色扮演</td>
                    <td><input type="checkbox" id="label_youth" name="label1[]" value="青春"> 青春</td>
                    <td><input type="checkbox" id="label_campus" name="label1[]" value="校园"> 校园</td>
                    <td><input type="checkbox" id="label_history" name="label1[]" value="历史"> 历史</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="label_combat" name="label1[]" value="战斗"> 战斗</td>
                    <td><input type="checkbox" id="label_sci-fi" name="label1[]" value="科幻"> 科幻</td>
                    <td><input type="checkbox" id="label_fantasy" name="label1[]" value="玄幻"> 玄幻</td>
                    <td><input type="checkbox" id="label_hotblooded" name="label1[]" value="热血"> 热血</td>
                    <td><input type="checkbox" id="label_sports" name="label1[]" value="体育"> 体育</td>
                    <td><input type="checkbox" id="label_funny" name="label1[]" value="搞笑"> 搞笑</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="label_adventure" name="label1[]" value="冒险"> 冒险</td>
                    <td><input type="checkbox" id="label_mystery" name="label1[]" value="悬疑"> 悬疑</td>
                    <td><input type="checkbox" id="label_horror" name="label1[]" value="恐怖"> 恐怖</td>
                    <td><input type="checkbox" id="label_magic" name="label1[]" value="魔法"> 魔法</td>
                    <td><input type="checkbox" id="label_girl" name="label1[]" value="少女"> 少女</td>
                    <td><input type="checkbox" id="label_survival" name="label1[]" value="生存"> 生存</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="label_timetravel" name="label1[]" value="穿越"> 穿越</td>
                    <td><input type="checkbox" id="label_psychology" name="label1[]" value="心理"> 心理</td>
                    <td><input type="checkbox" id="label_development" name="label1[]" value="养成"> 养成</td>
                </tr>
            </table>
            <input type="text" id="label" name="label" hidden>
        </div>
        <div class="form-group">
            <label for="release-date">发售日期：</label>
            <input type="date" id="release-date" name="date" required>
        </div>
        <div class="form-group">
            <label for="publisher">发行商：</label>
            <input type="text" id="publisher" name="publisher" required>
        </div>
        <div class="form-group">
            <label>视频文件：</label>
            <div class="upload-row">
                <label for="op">OP：</label>
                <input type="file" id="op" name="op" required>

                <label for="ed">ED：</label>
                <input type="file" id="ed" name="ed" required>
            </div>
        </div>

        <div class="form-group">
            <label>CG图片：</label>
            <div class="upload-row">
                <input type="file" id="img1" name="imgs[]" required>
                <input type="file" id="img2" name="imgs[]" required>
                <input type="file" id="img3" name="imgs[]" required>
                <input type="file" id="img4" name="imgs[]" required>
            </div>
        </div>
        <div class="form-group">
            <button type="submit">上传</button>
            <button type="reset" id="reset">重置</button>
        </div>
    </form>
</div>
</body>
</html>